<template>
    <div class="fill-in-main">
        <div class="tips-info">
            <div class="title">请认真填写以下信息，确保准确无误。填写说明：</div>
            <div class="info">1、 法人和企业信息校验通过后，法人将收到微信模板消息。</div>
            <div class="info">2、 法人需在24小时内点击消息，进行身份证信息与人脸识别信息收集。</div>
            <div class="info">3、 法人人脸认证通过后，将自动创建已认证的小程序。</div>
            <div class="info">
                4、 法人将收到设置小程序登录邮箱和密码的微信模板消息，点击消息前往设置登录邮箱和密码即可。
            </div>
        </div>
        <div class="content">
            <div class="title"><span></span>法人快速注册小程序</div>
            <el-form ref="formRef" :rules="rules" :model="form" label-width="110px">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="法人姓名" prop="legal_person_name">
                            <el-input
                                v-model.trim="form.legal_person_name"
                                maxlength="20"
                                placeholder="请输入法人姓名"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="法人微信号" prop="legal_person_wechat">
                            <el-input
                                v-model.trim="form.legal_person_wechat"
                                maxlength="20"
                                placeholder="请输入法人微信号"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="企业名称" prop="business_name">
                            <el-input
                                v-model.trim="form.business_name"
                                maxlength="20"
                                placeholder="请输入企业名称"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="企业代码类型" prop="business_code_type">
                            <el-select
                                v-model="form.business_code_type"
                                placeholder="请选择企业代码类型"
                                @change="vaildConfirm">
                                <el-option
                                    v-for="item in codeList"
                                    :key="item.name"
                                    :label="item.name"
                                    :value="item.value" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="企业代码" prop="business_code">
                            <el-input
                                v-model.trim="form.business_code"
                                maxlength="20"
                                placeholder="请选择企业代码"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="联系电话" prop="component_phone">
                            <el-input
                                v-model.trim="form.component_phone"
                                maxlength="20"
                                placeholder="请选择企业联系电话"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item class="mt30">
                            <el-button class="submit" type="primary" @click="onSubmit">提交申请</el-button>
                            <el-button class="cancel" type="default" plain @click="goBack">取消</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <Dialog :app-dialog="appDialog">
            <div>
                <div class="dialog_content_title">
                    <el-icon class="dialog_icon"><WarningFilled /></el-icon>
                    <div>确认要提交申请吗？</div>
                </div>
                <div class="dialog_content_desc">提交申请后不支持修改，请确保填写的内容准确无误。</div>
            </div>
        </Dialog>
    </div>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { ElMessage } from 'element-plus';
import { setApplyReg } from '@/api/channelconfig/marketingApplet';
import { getRegExp, validatePhone } from '@/utils/validate';
import { miniAppApplyRegInfo } from '@/api/channelconfig/marketingApplet';
import Dialog from '@/components/Dialog.vue';

const router = useRouter();
const route = useRoute();

const formRef = ref<any>(null);

const form = reactive<any>({
    legal_person_name: '',
    legal_person_wechat: '',
    business_name: '',
    business_code_type: '',
    business_code: '',
    component_phone: ''
});

const cancelHandel = () => {
    appDialog.visible = false;
};

const submitHandel = async () => {
    const params = {
        id: route.query.id,
        mini_program_type: route.query.type,
        ...form
    };
    const res = await setApplyReg(params).catch((err: any) => {
        ElMessage.error(err);
    });
    res && router.back();
};

const appDialog = reactive<any>({
    visible: false,
    title: '提示',
    width: '30%',
    cancel: cancelHandel,
    submit: submitHandel,
    cancelText: '取消',
    submitText: '确定'
});

const codeList = reactive<any>([
    {
        name: '统一社会信用代码(18 位)',
        value: 1
    },
    {
        name: '组织机构代码（9 位 xxxxxxxx-x）',
        value: 2
    },
    {
        name: '营业执照注册号(15 位)',
        value: 3
    }
]);

const codeLimit = (rule: any, value: any, callback: any) => {
    if (form.business_code_type === '') {
        callback(new Error('请选择企业代码类型'));
    } else if (form.business_code === '') {
        callback(new Error('请输入企业代码'));
    } else if (form.business_code_type == 1 && !getRegExp('creditCode').test(form.business_code)) {
        callback(new Error('统一社会信用代码格式不正确'));
    } else if (form.business_code_type == 2 && !getRegExp('code').test(form.business_code)) {
        callback(new Error('组织机构代码格式不正确'));
    } else if (form.business_code_type == 3 && !getRegExp('business').test(form.business_code)) {
        callback(new Error('营业执照注册号格式不正确'));
    } else {
        callback();
    }
};

const rules = reactive({
    legal_person_name: [{ required: true, message: '请输入法人姓名', trigger: 'blur' }],
    legal_person_wechat: [{ required: true, message: '请输入法人微信号', trigger: 'blur' }],
    business_name: [{ required: true, message: '请输入企业名称', trigger: 'blur' }],
    business_code_type: [{ required: true, message: '请选择企业代码类型', trigger: 'change' }],
    business_code: [{ required: true, validator: codeLimit, trigger: 'blur' }],
    component_phone: [
        { required: true, message: '请输入联系人手机号', trigger: 'blur' },
        { pattern: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
    ]
});

const vaildConfirm = () => {
    formRef.value.validateField('business_code_type');
};

const onSubmit = () => {
    formRef.value.validate(async (valid: any) => {
        if (valid) {
            appDialog.visible = true;
        }
    });
};

const initData = async () => {
    const res = await miniAppApplyRegInfo({ id: route.query.id });
    Object.assign(form, res);
};

if (route.query.id) {
    initData();
}

const goBack = () => {
    router.back();
};
</script>
<style lang="scss" scoped>
.fill-in-main {
    padding: 24px;
    background: #ffffff;
    height: calc(100vh - 210px);
    .tips-info {
        margin-bottom: 24px;
        padding: 20px;
        background-color: #fff6f0;
        .title {
            margin-bottom: 10px;
            font-size: 16px;
            font-weight: 500;
        }
        .info {
            color: #33302d;
            font-size: 14px;
            line-height: 28px;
        }
    }
    .content {
        background-color: #ffffff;
        :deep(.el-input--large) {
            width: 440px;
        }
        :deep(.el-form-item--large) {
            margin-bottom: 24px;
        }
        .title {
            display: flex;
            align-items: center;
            margin-bottom: 24px;
            color: #33302d;
            font-size: 16px;
            font-weight: 700;
            line-height: 18px;
            span {
                width: 4px;
                height: 16px;
                margin-right: 8px;
                background: #ff6b00;
            }
        }
    }
}
.dialog_content_title {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
    font-size: 14px;
    .dialog_icon {
        margin-right: 9px;
        color: #faad14;
        font-size: 14px;
    }
}
.dialog_content_desc {
    padding-left: 23px;
    color: #969696;
    font-size: 14px;
    line-height: 20px;
}
</style>
